<template>
	<view class="pageBg">
		<custom-nav-bar title="首页" :backgroundColor="backgroundColor"></custom-nav-bar>
		<view class="banner">
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff"
				autoplay>
				<swiper-item>
					<image src="../../static/iot.jpeg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/airsys.png" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text class="text">警报</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item v-for="(item,index) in alarm" :key="index">
						<navigator url="">{{item}}</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>
		<view class="cardBg">
			<uni-section title="设备统计" type="line" />
			<view class="countbox">
				<view class="box" v-for="(item,index) in deviceOptions" :key="index">
					<uni-icons :type="item.icon" size="36" :class="[`icon-${index + 1}`]"></uni-icons>
					<view class="name">{{item.name}}</view>
					<view :class="[`count-${index + 1}`]">{{item.count}}</view>
				</view>
			</view>
		</view>
		<view class="cardBg">
			<uni-section title="网关统计" type="line" />
			<view class="countbox">
				<view class="box" v-for="(item,index) in gatewayOptions" :key="index">
					<uni-icons :type="item.icon" size="36" :class="[`icon-${index + 1}`]"></uni-icons>
					<view class="name">{{item.name}}</view>
					<view :class="[`count-${index + 1}`]">{{item.count}}</view>
				</view>
			</view>
		</view>
		<view class="cardBg">
			<view class="cardbox">
				<uni-section title="警报分布" type="line" />
				<view class="time">
					<uni-dateformat :date="timeValue" format="yyyy/MM/dd"></uni-dateformat>
				</view>
			</view>
			<view class="charts">
				<qiun-data-charts type="bubble" :opts="bubbleopts" :chartData="bubblechartData" />
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNavBar from '@/components/custom-nav-bar/custom-nav-bar.vue'
	import CommonTitle from '@/components/common-title/common-title.vue'
	import ThemeItem from '@/components/theme-item/theme-item.vue'
	import uniDateformat from '@/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue'
	export default {
		data() {
			return {
				loading: true,
				show: false,
				timeValue: Number(new Date()),
				value1: Number(new Date()),
				deviceOptions: [{
						name: '设备总数',
						count: 33,
						icon: 'navigate-filled',
					},
					{
						name: '在线设备',
						count: 29,
						icon: 'navigate',
					},
					{
						name: '离线设备',
						count: 4,
						icon: 'notification',
					},
				],
				gatewayOptions: [{
						name: '网关总数',
						count: 20,
						icon: 'paperplane-filled',
					},
					{
						name: '在线网关',
						count: 13,
						icon: 'navigate',
					},
					{
						name: '离线网关',
						count: 7,
						icon: 'notification',
					},
				],
				alarm: [
					'Outlet Temp Sensor Alarm',
					'Low Press 2 Alarm By Sensor',
					'Low Press 1 Alarm By Sensor',
				],
				backgroundColor: '',
				deviceList: [],
				bubblechartData: {},
				bubbleopts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: false,
						gridType: "dash",
						splitNumber: 5,
						boundaryGap: "justify",
						min: 0,
						max: 250
					},
					yAxis: {
						disableGrid: false,
						gridType: "dash",
						data: [{
							min: 0,
							max: 150
						}]
					},
					extra: {
						bubble: {
							border: 2,
							opacity: 0.5
						}
					}
				},
			}
		},
		components: {
			'custom-nav-bar': CustomNavBar,
			'common-title': CommonTitle,
			'theme-item': ThemeItem,
			uniDateformat
		},
		onShow() {
			this.getResData()
			this.bubbleServerData()
			// this.callYourMethod()
			console.log('测试UNApp钩子函数');
			 
		},
		methods: {
			// async callYourMethod(){
			// 	const result = await npmnode_wangyanhui.sayHello();
			//     console.log('~~~~~~~~~~~~~~~~~~~',result); 
			// },
			onPageScroll(e) {
				const scrollTop = e.scrollTop;
				if (scrollTop > 10) {
					this.backgroundColor = '#51A9FB';
				} else {
					this.backgroundColor = '';
				}
			},
			async getResData() {
				const db = uniCloud.database()
				const res = await db.collection('res').get()
				this.deviceList = res.result.data
			},
			async test() {
				let rsData = await rd.tgetall('rs')
				console.log('~~rsData~~', rsData)
			},
			async getDeviceList() {
				let rsData = await rd.tgetall('rs')
				let device = rsData.filter(item => item.category === 'device')
				let result = device.filter(item => ['上海服务.中山医院.地下.机组1', '河南商丘.柘城中医.现场1.设备1', '中国联通.大连联通.营业厅.N4']
					.includes(item.id))
				this.deviceList = result
				console.log('this.deviceList:', this.deviceList, )
			},
			bubbleServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
								name: "Bark",
								data: [
									[40, 50, 20, "Bark"],
								]
							},
							{
								name: "邮箱",
								data: [
									[60, 100, 40, "邮箱"],
								]
							},
							{
								name: "短信",
								data: [
									[110, 30, 30, "短信"],
								]
							},
							{
								name: "机器人",
								data: [
									[200, 100, 50, "机器人"],
								]
							}
						]
					};
					this.bubblechartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 750rpx;
		padding: 30rpx 0;

		swiper {
			width: 750rpx;
			height: 340rpx;

			&-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}

	.notice {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f9f9f9;
		margin: 0 auto;
		border-radius: 20rpx;
		display: flex;

		.left {
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				color: $brand-theme-color;
				font-weight: 600;
				font-size: 28rpx;
			}
		}

		.center {
			flex: 1;

			swiper {
				height: 100%;

				&-item {
					height: 100%;
					font-size: 30rpx;
					color: #666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.right {
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.countbox {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.box {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.icon-1,
			.icon-4 {
				color: #FDA53B !important;
				display: inline-block;

				::v-deep .uni-icons {
					color: #FDA53B !important;
				}
			}

			.icon-2,
			.icon-5 {
				color: #1AABF6 !important;
				display: inline-block;

				::v-deep .uni-icons {
					color: #1AABF6 !important;
				}
			}

			.icon-3,
			.icon-6 {
				color: #FF4040 !important;
				display: inline-block;

				::v-deep .uni-icons {
					color: #FF4040 !important;
				}
			}

			.count-1,
			.count-4 {
				color: #FDA53B;
				font-size: 14px;
				font-weight: 600;
			}

			.count-2,
			.count-5 {
				color: #1AABF6;
				font-size: 14px;
				font-weight: 600;
			}

			.count-3,
			.count-6 {
				color: #FF4040;
				font-size: 14px;
				font-weight: 600;
			}

			.name {
				color: #333333;
				font-size: 14px;
				padding: 6px 0;
			}
		}
	}

	.cardbox {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.time {
			font-size: 12px;
			background: #eee;
			border-radius: 4px;
			padding: 0px 10px;
			display: flex;
			align-items: center;
			color: #676767;
		}
	}

	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 1px solid #eee;
		position: relative;
		background: #fff;

		&:last-child {
			border-bottom: 0
		}

		.left {
			display: flex;
			align-items: center;

			.text {
				padding-left: 20rpx;
				color: #666
			}
		}
	}
</style>